<template>
    <div class="case-item" :class="{
        'case-item--line': line,
    }" @click="onJump(item)">
        <div class="case-item__tips" v-if="item.tips">
            {{ item.tips }}
        </div>
        <div class="case-item__image" :style="line
            ? {}
            : {
                width: width + 'px',
                height: height + 'px',
            }
            ">
            <NuxtImg class="cover-image" :src="['工业元宇宙', '教育元宇宙'].includes(item.name) ||
                item.file.includes('gif')
                ? item.file
                : item.file +
                `?x-oss-process=image/watermark,image_` +
                toBase64(
                    'water/logo_white.png?x-oss-process=image/resize,P_20'
                ) +
                ',g_center,t_60/format,webp'
                " :width="width" :height="height" loading="lazy" quality="80" alt="北京华锐云空间" />

            <!-- 预览数 -->
            <div class="review-num">
                <img :src="`${_oss_}images/works/icon-view-white.png`" alt="北京华锐云空间" />
                <span>{{ item.page_view || 0 }}</span>
            </div>
        </div>

        <div class="case-item__info">
            <div class="case-item__top">
                <div class="case-item__title" :title="item.name" :style="{
                    fontSize: fontSize + 'px',
                }">
                    {{ (item.is_single == 1 && props.isNew) ? item.name : item.is_single == 1 ? "" : item.name }}
                </div>

                <img class="share-btn" @click.stop="onShare(item)" :src="`${_oss_}images/icon-share-btn.png`"
                    v-if="!item.work_id" />

                <div class="btn-exp" type="primary" v-else @click.stop="onJump(item)">
                    开始学习
                </div>
            </div>

            <div class="case-item__middle" v-if="item.work_id">
                <div class="price">
                    售价：<span class="red">{{
                        item.price > 0 ? "￥" + item.price : "免费"
                    }}</span>
                    <span class="original_price" v-if="item.original_price > 0">
                        ￥{{ item.original_price }}
                    </span>
                </div>

                <template v-if="item.price > 0">
                    <div class="buying" v-if="item.is_buy">已购买</div>

                    <el-button class="btn-buy" type="primary" onfocus="this.blur()" @click.stop="onBuy(item)" v-else-if="!userStore.isLogin ||
                        userStore.userInfo.id != item.publisher
                        ">
                        立即购买
                    </el-button>
                </template>
            </div>

            <div class="case-item__footer">
                <div class="icon-group">
                    <div class="icon-item like-item" :class="{ active: item.is_like }" @click.stop="onLike(item)">
                        <img v-if="item.is_like" :src="`${_oss_}images/works/icon-like-active.png`" alt="北京华锐云空间" />
                        <img v-else :src="`${_oss_}images/works/icon-like.png`" alt="北京华锐云空间" />
                        <span>{{ item.like || 0 }}</span>
                    </div>

                    <div class="icon-item star-item" :class="{ active: item.is_star }" @click.stop="onStar(item)">
                        <img v-if="item.is_star" :src="`${_oss_}images/works/icon-star-active.png`" alt="北京华锐云空间" />
                        <img v-else :src="`${_oss_}images/works/icon-star.png`" alt="北京华锐云空间" />
                        <span>{{ item.star || 0 }}</span>
                    </div>

                    <div class="icon-item comment-item" @click.stop="onComment(item)">
                        <img :src="`${_oss_}images/works/icon-comment.png`" alt="北京华锐云空间" />
                        <span>{{ item.comment || 0 }}</span>
                    </div>

                    <div class="icon-item share-item" @click.stop>
                        <img :src="`${_oss_}images/works/icon-share.png`" alt="北京华锐云空间" />
                        <span>{{ item.share || 0 }}</span>
                    </div>
                </div>

                <img class="share-btn" @click.stop="onShare(item)" :src="`${_oss_}images/icon-share-btn.png`"
                    v-if="item.work_id" />
            </div>
        </div>
    </div>

    <template v-if="item.work_id && item.price > 0">
        <DialogWorkPayServiceP ref="payServiceRef" @confirm="onPayConfirm(item)" />
        <DialogWorkPayP ref="payRef" @success="onPaySuccess(item)" />
    </template>
</template>
<script setup>
import { useContent } from ".";
import { useCaseLike, useCaseStar } from "@/hooks";
const { onLike } = useCaseLike();
const { onStar } = useCaseStar();
const {
    payRef,
    payServiceRef,
    onBuy,
    onJump,
    onShare,
    onComment,
    onPayConfirm,
    onPaySuccess,
} = useContent();
const userStore = useUserStore();

const props = defineProps({
    isNew: {
        type: Boolean,
        default: false
    },
    width: {
        type: [String, Number],
        default: 288,
    },
    height: {
        type: [String, Number],
        default: 156,
    },
    fontSize: {
        type: Number,
        default: 16,
    },
    item: {
        type: Object,
        default: () => ({}),
    },
    line: {
        type: Boolean,
        default: false,
    },
});
</script>
<style lang="scss" scoped>
.case-item {
    width: 288px;
    position: relative;
    margin-right: 16px;
    margin-bottom: 31px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);
    transition: all 0.5s;
    align-self: flex-start;

    &:hover {
        transform: translateY(-10px);
        box-shadow: 0px 0px 20px 0px rgba(1, 23, 86, 0.5);
    }

    &--line {
        width: 100%;
        height: auto;
        margin-right: 0;

        .case-item__image {
            width: 100%;
            height: 370px;

            img {
                width: 100%;
                height: auto;

                &:hover {
                    transform: scale(1) !important;
                }
            }
        }
    }

    &:nth-of-type(4n) {
        margin-right: 0;
    }

    &__top {
        display: flex;
        align-items: center;
        padding-top: 12px;

        .btn-exp {
            padding: 8px 15px;
            border: 1px solid #5085fb;
            color: #5085fb;
            font-size: 14px;
            flex-shrink: 0;
            border-radius: 4px;
            user-select: none;
            cursor: pointer;
        }
    }

    &__middle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 5px;

        .buying {
            color: #666;
            padding: 8px 15px;
            font-size: 14px;
            flex-shrink: 0;
            border-radius: 4px;
            user-select: none;
            cursor: pointer;
        }

        .price {
            font-size: 14px;
            color: #666;

            .red {
                color: #f00;
            }

            .original_price {
                text-decoration: line-through;
                font-size: 12px;
                margin-left: 2px;
            }
        }
    }

    &__info {
        padding: 0 12px;
    }

    &__image {
        width: 288px;
        height: 156px;
        overflow: hidden;

        img {
            object-fit: cover;
            transition: all 0.4s linear;

            &.cover-image:hover {
                transform: scale(1.4);
            }
        }

        .review-num {
            position: absolute;
            right: 7px;
            top: 8px;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 14px;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 6px 7px;
            border-radius: 4px;

            img {
                margin-right: 5px;
            }
        }
    }

    &__tips {
        position: absolute;
        left: 0;
        top: 0;
        padding: 6px 10px;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(-90deg, #ff3527, #ff8846);
        border-radius: 0 0 10px 0;
        z-index: 9;
    }

    &__title {
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__footer {
        display: flex;
        align-items: center;
        margin-top: 10px;
        padding-bottom: 15px;
        padding-top: 12px;
        padding-left: 5px;
        border-top: 1px solid #f1f1f1;

        .share-btn {
            margin-left: auto;
        }

        .publisher {
            color: #5085fb;
            margin-left: auto;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .icon-group {
            display: flex;
            align-items: center;
            color: #333;
            font-size: 14px;
            font-weight: 500;

            img {
                margin-right: 4px;
            }

            .icon-item {
                display: inline-flex;
                align-items: center;
                margin-right: 30px;

                &.like-item,
                &.star-item {
                    cursor: pointer;

                    img {
                        transition: all 0.2s;
                    }

                    &:active img {
                        transform: scale(1.3);
                    }
                }

                &.view-item {
                    img {
                        width: 17px;
                    }
                }

                &.like-item {
                    img {
                        width: 14px;
                    }
                }

                &.star-item {
                    img {
                        width: 14px;
                    }
                }

                &.comment-item {
                    cursor: pointer;

                    img {
                        width: 13px;
                    }
                }

                &.share-item {
                    img {
                        width: 12px;
                        height: 12px;
                    }
                }
            }
        }

        .make-same-btn {
            margin-left: auto;
        }
    }
}
</style>
